{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ extends "/base" }}
{{ import "./components/common" }}
{{ import "./components/card_blocks" }}

{{- block title() -}}
  {{- if !.Item.Loaded -}}
    Bookmark loading
  {{- else -}}
    {{ .Item.Title }}
  {{- end }} - Bookmarks
{{- end -}}

{{- block head() -}}
  {{- if !.Item.Loaded -}}
    <noscript><meta http-equiv="refresh" content="5"></noscript>
  {{- end -}}
{{- end -}}

{{- block body() -}}
  {{- yield quickAccessMenu(items=slice(
    slice("menu", "Menu"),
    slice("content", "Main content"),
  )) -}}
<div class="layout layout--bookmark">
  {{ include "/menu" }}

  <turbo-frame id="bookmark-{{ .Item.ID }}" data-controller="turbo-refresh"
  data-turbo-refresh-on-value="[data-deleted]"
  data-turbo-refresh-interval-value="3"
  class="bookmark-grid">
    {{- if !.Item.Loaded -}}
      <div class="text-center mt-8" id="content">
        <span class="text-3xl">{{ yield spinner() }}</span>
        <p class="text-lg">Bookmark is loading…</p>
      </div>
    {{- else -}}
      <div class="hidden print:block font-lora" data-controller="reader"
       dir="{{ default(.Item.TextDirection, "ltr") }}">
        <h1 class="px-6 py-4 text-3xl print:px-0">{{ .Item.Title }}</h1>
      </div>

      <div class="bookmark-sidebar"
        data-controller="panel"
        data-panel-hidden-class="panel--hidden"
      >
        <div class="
          h-topnav border-b border-b-gray-200 flex-shrink-0 flex flex-col
          print:hidden
        ">
          <button
            data-action="click->panel#toggleMenu"
            data-panel-target="button"
            aria-expanded="false"
            aria-controls="bookmark-panel"
            class="
              md:hidden
              flex-grow flex items-center justify-end gap-2
              px-4 bg-gray-100 dark:bg-gray-200
              cursor-pointer
              select-none"
          >
            <span>More information</span>
            {{- yield icon(name="o-chevron-u", class="inline-block link", svgClass="w-6 h-6") -}}
          </button>
        </div>
        <div
          id="bookmark-panel"
          tabindex="-1"
          data-panel-target="panel"
          aria-label="More information"
          data-action="keydown.esc->panel#toggleMenu"
          class="panel--hidden px-6 pt-4 pb-8 max-md:px-4 max-md:overflow-y-auto max-md:overscroll-contain flex-grow print:pb-0 print:px-0"
        >
          {{ include "./components/sidebar" }}
        </div>
      </div>

      <div class="bookmark-content" id="content">
        {* top bar *}
        <div class="
          sticky top-0 z-20 h-topnav
          flex flex-col
          border-b border-b-gray-200
          bg-app-bg bg-opacity-95 text-gray-400 hfw:text-gray-700
          max-sm:top-topnav
          print:hidden
        ">
          <div class="flex-grow flex items-center">
            <div>
              <a href="{{ urlFor(`/bookmarks/unread`) }}" data-controller="history" data-action="history#back"
              class="p-2 rounded-full w-8 h-8 border border-bg-100 inline-flex items-center justify-center
              hf:bg-gray-200 hf:text-gray-800">
                {{- yield icon(name="o-chevron-l", class="inline-block", svgClass="w-6 h-6") -}}
              </a>
            </div>
            <div class="flex-grow"></div>
            {{- if .Item.HasArticle -}}
              {{- include "./components/reader_control" -}}
            {{- end -}}
          </div>
          <div class="h-0.5 w-0 bg-gradient-to-r from-blue-700 to-blue-500"
           data-controller="scroll-indicator"
           data-scroll-indicator-target="progress"
          ></div>
        </div>

        {* title and description *}
        <div class="max-w-3xl mx-auto mt-4 print:mt-2 print:max-w-none mb-8 font-lora"
         data-controller="reader">
          {{ include "./components/title_form" .Item }}

          {{- if !empty(.Item.Description) -}}
            <p class="mt-2 text-lg leading-tight text-justify italic"
               dir="{{ default(.Item.TextDirection, "ltr") }}">{{ .Item.Description }}</p>
          {{- end -}}
          {{- if user.Settings.DebugInfo -}}
            {{ include "./components/debug" map("log", ._log, "props", ._props) }}
          {{- end -}}
        </div>

        {* content *}
        {{ include "./components/content_block" map(
          "Item", .Item,
          "HTML", .HTML
        ) }}

        <div class="mx-auto mt-6 pt-6 border-t print:hidden">
        {{- include "./components/bottom_actions" .Item -}}
        </div>
      </div>

    {{- end -}}
  </turbo-frame>
</div>
{{- end -}}
